import React, { useState, useEffect, useContext } from 'react';
import { View, StyleSheet, Dimensions, Text, TouchableOpacity } from "react-native";
import { Button } from "@rneui/themed";
import LinearGradinet from 'react-native-linear-gradient';
import CommonContext from '@/utils/createContext';
import moment from 'moment';

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const ButtonContent = () => {

    const { transcationDetail, isSignFinish, isSignExecute, isSign, handlePressReject, handlePressConfirm, handlePressExecute } = useContext(CommonContext);
    const [createTime, setCreateTime] = useState('');
    const [executeTime, setExecuteTime] = useState('');

    useEffect(() => {
        if (transcationDetail && transcationDetail.txId) {
            setCreateTime(moment(transcationDetail.detailedExecutionInfo.submittedAt).format('MMM DD, YYYY [at] HH:mm:ss'))
            setExecuteTime(moment(transcationDetail.executedAt).format('MMM DD, YYYY [at] HH:mm:ss'))
        }
    }, [transcationDetail]);



    return (
        <View>
            <View>
                <Text style={{ ...styles.title1, marginLeft: 15 * ratio, marginTop: 35 * ratio }}>
                    Created:
                </Text>
                <Text style={{ ...styles.title2, marginLeft: 15 * ratio, marginTop: 22 * ratio }}>
                    {createTime}
                </Text>
            </View>
            {isSignFinish && <View>
                <Text style={{ ...styles.title1, marginLeft: 15 * ratio, marginTop: 35 * ratio }}>
                    Executed:
                </Text>
                <Text style={{ ...styles.title2, marginLeft: 15 * ratio, marginTop: 22 * ratio }}>
                    {executeTime}
                </Text>
            </View>}
            {!isSignFinish && <View style={styles.buttonGroup}>
                {!transcationDetail.isRejection && <Button onPress={handlePressReject}
                    buttonStyle={{ ...styles.button, backgroundColor: '#FF0000', marginRight: 12 * ratio }} >
                    <Text style={{ ...styles.title1, color: '#FFFFFF' }}>Reject</Text>
                </Button>}
                {isSignExecute ?
                    <TouchableOpacity onPress={handlePressExecute}>
                        <LinearGradinet colors={['#0EBBF8', '#0069F6']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
                            style={styles.button}>
                            <Text style={{ ...styles.title1, color: '#FFFFFF', textAlign: 'center' }}>Execute</Text>
                        </LinearGradinet>
                    </TouchableOpacity> :
                    <TouchableOpacity disabled={isSign} onPress={handlePressConfirm}>
                        <LinearGradinet colors={['#0EBBF8', '#0069F6']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
                            style={{ ...styles.button }}>
                            <Text style={{ ...styles.title1, color: '#FFFFFF', textAlign: 'center' }}>Confirm</Text>
                        </LinearGradinet>
                    </TouchableOpacity>}
            </View>}
        </View>
    );
}

const styles = StyleSheet.create({
    title1: {
        fontSize: 16,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#2C2C2C',
        lineHeight: 24
    },
    title2: {
        fontSize: 16,
        fontFamily: 'SourceHanSansCN-Regular, SourceHanSansCN',
        fontWeight: '400',
        color: '#535353',
        lineHeight: 24
    },
    buttonGroup: {
        flexDirection: 'row',
        justifyContent: 'center',
        width: width,
        marginTop: 40 * ratio
    },
    button: {
        width: 152 * ratio,
        height: 50,
        borderRadius: 28,
        justifyContent: 'center'
    }
})

export default ButtonContent;
